{namespace dce=ArminVieweg\Dce\ViewHelpers}
<f:layout name="Default"/>

<f:section name="main">
    <div class="c-content-box c-bg-white">
        <div class="c-content-feature-10">
                <div class="c-content-title-1">
                    <h3 class="c-font-uppercase c-center c-font-bold">{field.title}</h3>

                    <div class="c-line-center c-theme-bg"></div>
                </div>

                <f:for each="{field.historylist}" as="vo" iteration="iterator">
                    <f:if condition="{iterator.isOdd}">
                        <ul class="c-list">
                    </f:if>

                    <f:if condition="{iterator.isOdd}">
                        <li>
                            <div class="c-card c-font-right wow animate fadeInLeft">
                                <i class="icon-trophy c-font-27 c-theme-font c-float-right c-border c-border-opacity"></i>

                                <div class="c-content c-content-right">
                                    <h3 class="c-font-uppercase c-font-bold">
                                        <f:format.date format="Y">@{vo.date}</f:format.date> / <f:format.date format="m">@{vo.date}</f:format.date>
                                    </h3>
                                    <p> {vo.description} </p>
                                </div>
                            </div>
                            <div class="c-border-bottom c-bg-opacity-2"></div>
                        </li>
                        <div class="c-border-middle c-bg-opacity-2"></div>
                    </f:if>
                    <f:if condition="{iterator.isEven}">
                        <li>
                            <div class="c-card wow animate fadeInRight">
                                <i class="icon-rocket c-font-27 c-theme-font c-float-left c-border c-border-opacity"></i>

                                <div class="c-content c-content-left">
                                    <h3 class="c-font-uppercase c-font-bold">
                                        <f:format.date format="Y">@{vo.date}</f:format.date> / <f:format.date format="m">@{vo.date}</f:format.date>
                                    </h3>

                                    <p> {vo.description} </p>
                                </div>
                            </div>
                            <div class="c-border-bottom c-bg-opacity-2"></div>
                        </li>
                    </f:if>
                    <f:if condition="{iterator.isLast}">
                        <f:then>
                            </ul>
                        </f:then>
                        <f:else>
                            <f:if condition="{iterator.isEven}">
                                </ul>
                            </f:if>
                        </f:else>
                    </f:if>
                </f:for>

            </div>
    </div>
</f:section>